<template>
	<div>
		<div class="h2">活动人员管理</div>
		<a-button-group size="default" class="option">
			<!-- <a-button type="primary" @click="seeList('','add')">新增</a-button> -->
			<a-button type="primary" @click="fileimport">导入</a-button>
			<a-button type="danger" @click="deleteMember">批量删除</a-button>
		</a-button-group>
		<div style="margin-top:10px;">
			<a-tabs :defaultActiveKey="userType" @change="callback">
				<a-tab-pane v-for="(item,i) in userTypeList" :key="item.Key" :tab="item.Value"></a-tab-pane>
			</a-tabs>
			<el-table :data="data" v-loading="loading" border :max-height="tableHeight" @selection-change="handleSelectionChange" highlight-current-row style="width: 100%;">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column type="index" label="序号" width="60" fixed="left"></el-table-column>
				<el-table-column prop="Name" label="名称/学号" min-width="140" fixed="left">
					<template slot-scope="scope">
						<i
							:title="scope.row.Sex == 1 ? '男' : '女'"
							:class="{ iconfont: true, 'icon-xingbienan': scope.row.Sex == 1, 'icon-xingbienv': scope.row.Sex == 2 }"
							:style="{ color: scope.row.Sex == 1 ? 'blue' : 'red' }"
							@click="deleteList(scope.row)"
						></i>
						{{ scope.row.Name }} / {{ scope.row.UserNo }}
						<a-tag v-if="scope.row.IsManager" color="green">管理员</a-tag>
					</template>
				</el-table-column>
				<el-table-column prop="TypeName" label="类型" width="120"></el-table-column>
				<el-table-column prop="AddTime" label="加入时间" min-width="100"></el-table-column>
				<el-table-column prop="AddTime" label="添加类型" min-width="100">
					<template slot-scope="scope">
						{{ scope.row.IsImport?'导入':'正常加入' }}
					</template>
				</el-table-column>
				<el-table-column prop="IsSign" label="是否完成签到" width="120">
					<template slot-scope="scope">
						<a-tag :color="scope.row.IsSign || scope.row.IsImport?'blue':'red'">{{ scope.row.IsSign || scope.row.IsImport ? '已完成' : '未完成' }}</a-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="180" fixed="right">
					<template slot-scope="scope">
						<a-tooltip placement="top">
							<template slot="title">
								签到记录
							</template>
							<i title="签到记录" class="iconfont icon-guanli" style="color: blue;" @click="seeList(scope.row, 'ActivitysignIndex')"></i>
						</a-tooltip>
						<oprateBtn title="类型设置" icon="icon-shezhi" color="blue" @tap="setType(scope.row)"></oprateBtn>
						<a-tooltip placement="top" v-if="!scope.row.IsManager">
							<template slot="title">
								设为管理者
							</template>
							<i title="设为管理者" class="iconfont icon-guanliyuan1" style="color: yellowgreen;" @click="deleteList(scope.row, 1)"></i>
						</a-tooltip>
						<a-tooltip placement="top" v-if="scope.row.IsManager">
							<template slot="title">
								取消管理者身份
							</template>
							<i title="取消管理者身份" class="iconfont icon-assist-cancel" style="color: red;" @click="deleteList(scope.row, 2)"></i>
						</a-tooltip>
						<a-tooltip placement="top" v-if="!scope.row.IsManager">
							<template slot="title">
								删除
							</template>
							<i title="删除" class="iconfont icon-delete" style="color: red;" @click="deleteList(scope.row, 3)"></i>
						</a-tooltip>
						<!-- <a-tooltip placement="top">
							<template slot="title">
								奖项管理
							</template>
							<i title="奖项管理" class="iconfont icon-huodong" style="color: green;" @click="seeList(scope.row, 'ActivityMemberPrize')"></i>
						</a-tooltip> -->
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage"
			 :page-sizes="pagination.pageSizeOptions" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
			 :total="pagination.total"></el-pagination>
		</div>
		<addMember :text="text" :ActivityMemberTypeList="ActivityMemberTypeList" v-show="addMemberIf" @closeFun="closeFun"></addMember>
		<ActivityMemberSetType v-show="ActivityMemberSetTypeIf" :text="text" @closeFun="closeFun"></ActivityMemberSetType>
		<exportcon :importText="importText" v-show="exportconIf" @closeFun="closeFun"></exportcon>
	</div>
</template>

<script>
import moment from 'moment';
import addMember from './addMember';
import ActivityMemberSetType from '@/components/ActivityMemberSetType.vue';
import Func from '@/utils/func';
import Cache from '@/utils/cache';
import exportcon from '@/components/exportcon.vue';
import { getActivityMemberList,ManageActivityMemberDoGetPageList, DeleteActivityMember, DoAddActivityManager, DoDeleteActivityManager, DoGetActivityMemberTypeListCommon } from '@/api/follow';
const data = [];
export default {
	components: {
		addMember,
		ActivityMemberSetType,
		exportcon
	},
	data() {
		return {
			data,
			addIf: false,
			text: {},
			pagination: {
				currentPage: 1,
				pageSize: this.global.pageSize,
				pageSizeOptions: this.global.pageSizeOptions, // 每页中显示的数据
				showTotal: total => `共有 ${total} 条数据` // 分页中显示总的数据
			},
			loading: false,
			tableHeight: parseFloat(window.innerHeight - 160),
			requestUrl: this.global.requestUrl,
			token: Cache.get('token'),
			addMemberIf: false,
			ActivityMemberSetTypeIf: false,
			fileList: [],
			exportconIf: false,
			importText: {},
			ActivityMemberTypeList: [],
			userType:0,
			userTypeList:this.global.userTypeList,
			multipleSelection:[]
		};
	},
	computed: {},
	created() {
		this.getList();
		// this.getOtherList();
	},
	mounted() {},
	methods: {
		moment,
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
		callback(key){
			this.userType = key
			this.pagination.currentPage = 1
			this.getList()
		},
		fileimport() {
			this.importText = { name:'成员导入-管理员',activityID: this.$route.query.ID, time: new Date() };
			this.exportconIf = true;
		},
		handleChange(info) {
			if (info.file.status !== 'uploading') {
			}
			if (info.file.status === 'done') {
				this.$message.success(info.file.response.msg);
				this.fileList = [];
			} else if (info.file.status === 'error') {
				this.$message.error(info.file.response.msg);
				this.fileList = [];
			}
		},
		setType(text) {
			this.text = { ...text, mytype: 'manage', time: new Date() };
			this.ActivityMemberSetTypeIf = true;
		},
		handleSizeChange(val) {
			this.pagination.pageSize = val;
			this.getList();
		},
		handleCurrentChange(val) {
			this.pagination.currentPage = val;
			this.getList();
		},
		async getList() {
			this.loading = true;
			let data = {};
			data.activityID = this.$route.query.ID ? this.$route.query.ID : '';
			data.pageIndex = this.pagination.currentPage;
			data.pageSize = this.pagination.pageSize;
			data.type = this.userType==0?'':this.userType
			let res = await ManageActivityMemberDoGetPageList(data);
			if (res.data.code !== 0) {
				this.$message.error(res.data.msg);
			}
			this.loading = false;
			this.data = res.data.data;
			const pagination = { ...this.pagination
			};
			pagination.total = res.data.pageInfo.TotalItemCount;
			this.pagination = pagination;
		},
		async getOtherList() {
			let res = await DoGetActivityMemberTypeListCommon();
			this.ActivityMemberTypeList = res.data.data;
		},
		deleteList(text, type) {
			let that = this;
			this.$confirm({
				title: '提示',
				content: type == 1 ? `您确定将该成员设为管理员吗？` : type == 2 ? `您确定取消该成员的管理员身份吗？` : `您确定删除该活动成员吗？`,
				okText: '确认',
				cancelText: '取消',
				async onOk() {
					let data = {};
					data.id = type == 2 ? text.ManagerID : text.ID;
					data.ActivityID = that.$route.query.ID;
					data.UserNo = text.UserNo;
					let res = type == 1 ? await DoAddActivityManager(data) : type == 2 ? await DoDeleteActivityManager(data) : await DeleteActivityMember(data);
					if (res.data.code == 0) {
						that.getList();
						that.$message.success(res.data.msg);
					} else {
						that.$message.error(res.data.msg);
					}
				}
			});
		},
		deleteMember() {
			if (this.multipleSelection.length == 0) {
				this.$message.error('请先选择要删除的成员！');
			} else {
				let that = this;
				this.$confirm({
					title: '提示',
					content: '确定要删除选中的成员吗？',
					okText: '确认',
					cancelText: '取消',
					async onOk() {
						let list = that.multipleSelection;
						for (let i = 0, len = list.length; i < len; i++) {
							let data = {};
							data.id = list[i].ID;
							let res = await DeleteActivityMember(data);
							if(res.data.code==0){
								that.$message.success(`成功删除第${i+1}条数据`)
							}else{
								that.$message.error(res.data.msg)
							}
						}
						that.getList();
					}
				});
			}
		},
		seeList(text, name) {
			if (name == 'add') {
				this.text = { time: new Date(), ActivityID: this.$route.query.ID, ...text };
				this.addMemberIf = true;
			} else if (name == 'ActivityMemberPrize') {
				this.$router.push({
					name: name,
					query: {
						activityMemberID: text.ID,
						Name: text.Name,
						TypeID: this.$route.query.TypeID
					}
				});
			} else {
				this.$router.push({
					name: name,
					query: {
						ID: text.ID
					}
				});
			}
		},
		closeFun(data) {
			this.addMemberIf = false;
			this.ActivityMemberSetTypeIf = false;
			this.exportconIf = false;
			if (data == 1) {
				this.getList();
			}
		}
	}
};
</script>

<style lang="less" scoped>
/deep/.ant-form-item {
	display: flex;
	margin-bottom: 10px !important;
}
/deep/.ant-form-item-label {
	width: 80px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: right;
}
/deep/.ant-form-item-control-wrapper {
	flex: 1;
}
/deep/.el-table th.is-leaf {
	background: #fafafa;
}
/deep/.el-table td,
/deep/.el-table th {
	padding: 5px;
}
.option {
	margin-top: 10px;
	margin-bottom: 20px;
	overflow: hidden;
}
.option .btn {
	height: 36px;
	line-height: 36px;
	padding: 0 10px;
	float: left;
	background: #1890ff;
	color: #fff;
	margin-right: 10px;
	border-radius: 3px;
	cursor: pointer;
	border: none;
}
.foot {
	text-align: center;
	margin-top: 100px;
}
.el-pagination {
	margin-top: 10px;
}
</style>
